<template>
	<div class="appoint-info">
		<cl-customer
			:gender="info.cus_sex"
			:name="info.cus_name"
			:mobile="info.cus_mobile"
			:wechat="info.cus_wx || '-'"
			:avatar="info.cus_img"
			:type="info.cus_type"
		/>
		<div class="appoint-info__content">
			<div class="label">预约时间：</div>
			<div>{{ info.appoint_date }}</div>
			<div class="label">预约服务：</div>
			<div>{{ projects }}</div>
			<div class="label">操作时间：</div>
			<div>{{ info.update_at }}</div>
		</div>
		<div class="appoint-info__bottom">
			<el-button
				plain
				size="small"
				style="width:100px"
				v-if="info.status == 1"
				@click="editAppoint"
			>
				改约
			</el-button>
      <!-- v-if="!browser.isMobile"  -->
			<!-- <el-button type="primary" size="small" style="flex:1" @click="openDetail">
				查看客户详情
			</el-button> -->
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
	inject: ["$layout"],
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {};
	},
	computed: {
		projects() {
			const { projects } = this.info;
			return projects.join("；");
		},
		...mapGetters(["browser"])
	},
	methods: {
		editAppoint() {
			this.$emit("edit-appoint", this.info);
		},
		openDetail() {
      // 这个是查看客户详情
			// this.$layout.openCusDetail(this.info, "new-appoint");
		}
	}
};
</script>
<style lang="scss" scoped>
.appoint-info {
	width: 300px;
	padding: 5px;
	&__content {
		box-sizing: border-box;
		border-radius: 5px;
		padding: 15px;
		margin: 10px 0;
		background: #f3f3f5;
		.label {
			color: #c1c1c1;
		}
	}

	&__bottom {
		border-top: solid 1px #ebeef5;
		margin: 0 -15px;
		padding: 15px 15px 0;
		display: flex;
	}
}
</style>
